import * as React from 'react';
import { StyleSheet } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import { Text, View } from '../components/Themed';
import userLoginMsg from '../hooks/userLoginMsg';

export default function Mine({navigation}) {
    const userLoginGlo = userLoginMsg();//登录信息
    if(!userLoginGlo.isLogin) {
        React.useEffect(() => {
            navigation.navigate('Login');
        }, []);
        
        return null;
    }
    const loginOut = () => {
        sessionStorage.setItem('userphone', '');
        navigation.replace('Root');
    };
    return (
        <View style={styles.container}>
            <View style={funListStyles.container}>
                <View style={funListStyles.listItem}>
                    <FontAwesome
                        name="info-circle"
                        size={25}
                        style={funListStyles.itemIconL}
                    />
                    <Text style={funListStyles.itemInter}>朋友圈</Text>
                </View>
                <View style={funListStyles.listItem}>
                    <FontAwesome
                        name="info-circle"
                        size={25}
                        style={funListStyles.itemIconL}
                    />
                    <Text style={funListStyles.itemInter}>设置</Text>
                </View>
                <View style={funListStyles.listItem}>
                    <FontAwesome
                        name="info-circle"
                        size={25}
                        style={funListStyles.itemIconL}
                    />
                    {/*<Text style={funListStyles.itemInter} onPress={() => navigation.navigate('Login')}>登录</Text>*/}
                    <Text style={funListStyles.itemInter} onPress={() => loginOut()}>登出</Text>
                    <FontAwesome
                        name="angle-right"
                        size={25}
                        style={funListStyles.itemIconR}
                    />
                </View>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold',
    },
    separator: {
        marginVertical: 30,
        height: 1,
        width: '80%',
    },
});
//功能区列表
const funListStyles = StyleSheet.create({
    container: {
        backgroundColor: '#FFF',
        marginTop: 20,
    },
    listItem: {
        display: 'flex',
        flexDirection: 'row',
        height: 40,
        lineHeight: 40,
        paddingLeft: 20,
        paddingRight: 20,
    },
    itemIconL: {
        marginRight: 10,
        lineHeight: 40,
        textAlign: 'left',
    },
    itemIconR: {
        marginLeft: 10,
        lineHeight: 40,
        textAlign: 'right',
    },
    itemInter: {
        flex: 1,
        textAlign: 'left',
        lineHeight: 40,
    },
});
